<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" style="width: 90%">
      <el-form-item label="标案编码">
        <el-input :value="tenderInfo.tenderCode" disabled></el-input>
      </el-form-item>
      <el-form-item label="标案名称">
        <el-input :value="tenderInfo.tenderName" disabled></el-input>
      </el-form-item>

      <el-form-item label="竞标产品">
        <el-select
          v-model="currentProduct"
          placeholder="全部"
          @change="productSelected"
          clearable
        >
          <el-option
            v-for="item in products"
            :key="item.id"
            :value="item.id"
            :label="item.productName"
          />
        </el-select>
      </el-form-item>

      <div v-if="this.isShow === true">
        <el-form-item label="产品样例">
          <el-image
            style="width: 150px; height: auto"
            :src="currentProductInfo.imageUrl"
            fit="contain"
          ></el-image>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称">
              <el-input
                :value="currentProductInfo.productName"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号">
              <el-input
                :value="currentProductInfo.productModel"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="物料编码">
              <el-input
                :value="currentProductInfo.productCode"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位">
              <el-input
                :value="currentProductInfo.productUnit"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-table
          :data="records"
          border
          style="width: 100%; margin: 5px"
          v-loading="recordsLoading"
        >
          <el-table-column
            type="index"
            width="50"
            label="编号"
            align="center"
          />
          <el-table-column label="报价" align="center">
            <template slot-scope="scope">
              {{ scope.row.bid }}
            </template>
          </el-table-column>
          <el-table-column label="可供数量" align="center">
            <template slot-scope="scope">
              {{ scope.row.provide }}
            </template>
          </el-table-column>
          <el-table-column prop="supplier" label="供应商" align="center" />
          <el-table-column prop="fixTime" label="中标时间" align="center" />
        </el-table>
      </div>
    </el-form>
    <el-empty
      :image-size="200"
      description="请选择要查看结果竞标产品"
      v-if="this.isShow === false"
    ></el-empty>
  </div>
</template>

<script>
import { competeTender, getCompeteResult } from "@/api/supplierTender";
export default {
  data() {
    return {
      form: {
        bidPrice: 0.0,
        provide: 0,
      },
      currentProduct: "",
      currentProductInfo: {},
      isShow: false,
      records: [],
      recordsLoading: false,
      timer: null,
    };
  },
  props: {
    tenderInfo: {
      type: Object,
      default: {
        tenderName: "",
        tenderCode: "",
        tenderId: "",
      },
    },
    products: {
      type: Array,
    },
  },
  methods: {
    productSelected(val) {
      this.currentProduct = val;
      if (this.currentProduct === "" || this.currentProduct === undefined) {
        this.isShow = false;
      } else {
        this.isShow = true;
        this.currentProductInfo = this.products.filter((p) => p.id === val)[0];
        if (this.currentProduct !== "" || this.currentProduct !== undefined) {
          this.getResult();
        }
      }
    },
    getResult() {
      const data = {
        tenderId: this.tenderInfo.tenderId,
        productId: this.currentProduct,
      };
      getCompeteResult(data).then((res) => {
        if (res.code === 200) {
          this.records = res.data;
        }
      });
    },
    limitInput(value, name) {
      this.form[name] =
        ("" + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },

    onSubmit() {
      const data = {
        supplierId: this.$store.getters.accountId,
        tenderId: this.tenderInfo.tenderId,
        productId: this.currentProduct,
        bidUnit: "元/"+this.currentProductInfo.productUnit,
        price: this.form.bidPrice,
        tenderProvide: this.form.provide,
        bidCount: this.currentProductInfo.round,
      };

      competeTender(data).then((res) => {
        if (res.code === 200)
          this.$message.success("成功报价，你可再次报价或等待最终结果！");
        if (this.currentProduct !== "" || this.currentProduct !== undefined) {
          this.getRecords();
        }
      });
    },
  },
};
</script>

<style scoped>
/* .notice {
  align-content: center;
} */
.text {
  font-size: 12px;
}

.item {
  margin-bottom: 15px;
}
a {
  position: relative;
  color: #ff5100;
  display: block;
  /* width: 50%; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-top .child {
  display: inline-block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin: 10px;
  height: auto;
  display: inline-block;
}
</style>
